{%- assign env = 'page' -%}
<predictive-search class="search-form-content" data-env="{{ env }}" data-show-overlay="{% if show_overlay %}1{% else %}0{% endif %}">
  <div class="position-relative">
    <div class="search-form-overlay as-search-form-overlay"></div>
    <form id="search-form-{{ env }}" action="{{ routes.search_url }}" method="get" role="search" class="search-form as-predictive-search-form w-100">
      <div class="d-flex justify-content-center flex-wrap w-100">
        <div class="input-text">
          <span class="search-icon active">
            {% render 'icon-search' %}
          </span>
          <input 
            type="text"
            name="q" 
            autocomplete="off" 
            value="{{ search.terms | escape }}" 
            class="form-control as-search-input pe-6 border"
            {% if position == 'results' %}
              placeholder="{{ 'sections.custom_search.placeholder' | t }}" 
              aria-label="{{ 'sections.custom_search.placeholder' | t }}"
            {% else %}
              placeholder="{{ 'faq.search.placeholder' | t }}" 
              aria-label="{{ 'faq.search.placeholder' | t }}"
            {% endif %}
            >
          <input type="hidden" name="type" value="{{ search_types }}"/>
          <input name="options[prefix]" type="hidden" value="last">
          
          <button type="button" class="btn clear-btn as-clear-btn border-0">
            {% render 'icon-close-circle' %}
          </button>
        </div>
      </div>
    </form>
    
    {%- if showQuickLinks -%}
      <aside class="as-quick-links-results d-none">
        <p class="predictive-search-title">{{ 'sections.custom_search.quick_link' | t }}</p>
        <ul class="predictive-search-content">
          {%- for link in linklists[settings.quick_link_menu].links limit:5 -%}
            <li><a {% render 'link', link: link.url %} class="ellipsis-1" href="{{link.url}}">{{link.title}}</a></li>
          {%- endfor -%}
        </ul>
      </aside>
    {%- endif -%}
    <aside class="predictive-search-dropdown as-predictive-links d-none">
      <div class="predictive-search-container">
        <div class="results">
          <div class="as-predictive-results predictive-results bg-default show" aria-labelledby="dropdownMenuLink">
            
          </div>
        </div>
        <div class="loading">
          <div class="d-flex justify-content-center loading-item">
            <div class="spinner-border" role="status">
              <span class="visually-hidden">Loading...</span>
            </div>
          </div>
        </div>
      </div>
     
    </aside>
  </div>
</predictive-search>